<template>
  <div class="left">
    <Card height="173px">
      <Chart :option="barChartOption" />
    </Card>
    <Card height="173px">
      <Chart :option="lineChartOption" />
    </Card>
    <Card height="173px">
      <Chart :option="pieChartOption" />
    </Card>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import type { ECOption } from "@/utils/echarts";

const barChartOption = ref<ECOption>({
  title: {
    text: "各行业程序员数量",
  },
  xAxis: {
    data: [],
  },
  series: {
    type: "bar",
    data: [],
    barWidth: 15,
    itemStyle: {
      borderRadius: 2,
    },
  },
});

onMounted(() => {
  setTimeout(() => {
    // 柱形图
    const barChartData = [300, 200, 400, 250, 550, 450, 350];
    const barChartXAxis = [
      "旅游行业",
      "游戏行业",
      "电商行业",
      "医疗行业",
      "金融行业",
      "教育行业",
      "餐饮行业",
    ];

    (barChartOption.value.xAxis as any).data = barChartXAxis;
    (barChartOption.value.series as any).data = barChartData;
  }, 500);
});

const lineChartOption = ref<ECOption>({
  // 标题组件
  title: {
    text: "学习变化",
  },
  // x轴组件
  xAxis: {
    data: [],
  },
  // 系列组件：设置图表类型、数据、样式等
  series: [
    {
      type: "line",
      data: [],
      smooth: true,
      name: "新增项目",
    },
    {
      type: "line",
      data: [],
      smooth: true,
      name: "新增技能",
    },
  ],
});

onMounted(() => {
  setTimeout(() => {
    // 折线图
    const lineChartData1 = [
      300, 200, 400, 250, 550, 450, 350, 200, 400, 250, 550, 280,
    ];
    const lineChartData2 = [
      200, 400, 250, 550, 300, 200, 400, 250, 550, 450, 350, 180,
    ];
    const lineChartXAxis = [
      "1月",
      "2月",
      "3月",
      "4月",
      "5月",
      "6月",
      "7月",
      "8月",
      "9月",
      "10月",
      "11月",
      "12月",
    ];

    (lineChartOption.value.xAxis as any).data = lineChartXAxis;
    (lineChartOption.value.series as any)[0].data = lineChartData1;
    (lineChartOption.value.series as any)[1].data = lineChartData2;
  }, 500);
});

const pieChartOption = ref<ECOption>({
  // 标题组件
  title: {
    text: "工程师年龄分布",
  },
  xAxis: {
    show: false,
  },
  yAxis: {
    show: false,
  },
  // 系列组件：设置图表类型、数据、样式等
  series: {
    type: "pie",
    data: [],
    radius: ["30%", "45%"],
    label: {
      show: false,
    },
  },
  legend: {
    top: "auto",
    bottom: 10,
    right: "auto",
    left: "center",
  },
  tooltip: {
    trigger: "item",
  },
});

onMounted(() => {
  setTimeout(() => {
    // 饼状图
    const pieChartData = [
      {
        name: "20岁以下",
        value: 20,
      },
      {
        name: "20-29岁",
        value: 30,
      },
      {
        name: "30-39岁",
        value: 40,
      },
      {
        name: "40-49岁",
        value: 50,
      },
      {
        name: "50岁以上",
        value: 60,
      },
    ];

    (pieChartOption.value.series as any).data = pieChartData;
  }, 500);
});

defineOptions({
  name: "Left",
});
</script>

<style scoped lang="scss">
.left {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
</style>
